<template>
  <div>
    <div class="draw" v-if="loadState == true">
      <div
        class="draw-list"
        v-for="(de, di) in movedata.list"
        @click="jumpto(de.id)"
        :key="di"
      >
        <div class="list">
          <div class="list-top">
            <p class="list-top-p">{{ de.nm }}</p>
            <span class="s-1"
              >{{ de.sellPrice }}
              <span class="s-2">元起</span>
            </span>
          </div>
          <div class="list-address">
            <p>{{ de.addr }}</p>
            <span>10Km</span>
          </div>
          <div class="list-txt">
            <span v-for="(ce, ci) in de.hallType" :key="ci">{{ ce }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchTxt",
  props: ["movedata"],
  data() {
    return {
      loadState: -1, //loading状态
    };
  },
  methods: {
    jumpto(k) {
      console.log(k);
      this.$router.push({ path: "/movieBuy", query: { deId: k } });
    },
  },
  watch: {
    movedata(value) {
      this.loadState = true;
      console.log("----movedata---", value);
    },
  },
};
</script>

<style lang="scss" scoped>
// 渲染数据
.draw {
  width: 100%;
  .loading {
    width: 100%;
  }
  .draw-list {
    background: rgb(248, 248, 248);
    .list {
      padding: 7px 0;
      width: 352px;
      margin: 14px auto;
      .list-top {
        display: flex;
        align-items: center;
        .list-top-p {
          width: 80%;
          // display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 18px;
          font-weight: bold;
        }
        .s-1 {
          // display: inline-block;
          font-size: 16px;
          color: #f00;
          .s-2 {
          }
        }
      }
      .list-address {
        display: flex;
        align-items: center;
        p {
          width: 90%;
          font-size: 12px;
          padding: 12px 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        span {
          font-size: 12px;
        }
      }
      .list-txt {
        width: 100%;
        // height: 30px;
        // 有问题
        display: flex;
        span {
          display: inline-block;
          font-size: 10px;
          color: #f00;
          margin-right: 10px;
          padding: 1px 2px;
          border-radius: 3px;
          border: 1px solid rgb(25, 0, 255);
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>